import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { MapPage } from 'weaver-mobile-page';
import { SegmentedControl,ActivityIndicator,Result,Icon,Tools } from 'weaver-mobile';
import CustomerListNormal from '../../list/CustomerListNormal';

import CustomerMapStore from '../../../stores/card/CustomerMapStore';

// const Normal = MapPage.Normal;
const getLabel = Tools.getLabel;
// @inject('customerMapStore')
@withRouter
@observer
export default class CustomerMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      store : new CustomerMapStore(),
      span: [7, 1]
    }
  }

  componentWillMount(){
    const {match,params} = this.props;
    const ps = params ? params : match.params;
    const store = this.state.store;    
    store.doNew(this,ps);
  }

  componentDidMount() {
    const store = this.state.store;
    store.doInit();
  }

  componentWillUnmount(){
    const store = this.state.store;
    store.doClear();
  }

  
  render() {
    // const store = this.props.customerMapStore;
    const store = this.state.store;
    const {initResponsed,initSuccessed,initFailedMsg,mapPage} = store;
    if(initResponsed){
        if(initSuccessed){
          const {lat1,lng1,customerAddress,customerName} = store;
          return (
              <div className="crm_map">
                <div className="crm_map_title">
                  {customerName}
                </div>
                <div className="crm_map_content">
                  <MapPage
                    store={mapPage}
                    position={[lng1, lat1]}
                    address={customerAddress}
                    showIntroduction = {false} 
                  />
                </div>
                <div className="crm_map_condition">
                  <div>{getLabel('388601','附近')}：</div>
                  <div>
                    <SegmentedControl 
                      style={{ height: '20px', width: '250px' }}
                      selectedIndex={0} 
                      values={['1km', '3km', '5km', '10km']} 
                      onValueChange={this.onValueChange.bind(this)}
                    />
                  </div>
                </div>
                <div className="crm_map_list">
                  <CustomerListNormal customerMapStore={store}></CustomerListNormal>
                </div>
              </div>
          )
        }else{
          return (
            <div>
                <Result
                  img={<Icon type="cross-circle-o" className="crm_commerce_initFailedMsg" style={{ fill: '#F13642' }} />}
                  title=""
                  message={initFailedMsg}
                />
            </div>);
      }
    }else{
      return <div className="crm-bg-loading"><ActivityIndicator text="Loading..."/></div>;
    }
  }

  onValueChange(v){
    v = v.replace("km","");
    const store = this.state.store;
    store.setRaidus(v);
  }
}